<template>
  <div>
    <!-- 共三个页面   -->
    <keep-alive include="HomeView">
      <router-view></router-view>
    </keep-alive>

    <!-- https://openapi.alipay.com/gateway.do?timestamp=2013-01-01
    08:08:08&method=alipay.trade.wap.pay&app_id=24609&sign_type=RSA2&sign=ERITJKEIJKJHKKKKKKKHJEREEEEEEEEEEE&version=1.0&charset=GBK&biz_content=AlipayTradeOrderMobilepayModel -->

    <!-- 
   加了route  是做自动匹配  
   不加也能跳  -->
    <van-tabbar v-model="active" route placeholder>
      <van-tabbar-item replace to="/home">
        <span>电影</span>
        <template #icon="props">
          <!-- 图标 -->
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-dianying"></use>
          </svg>
        </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/goods">
        <span>商品</span>
        <template #icon="props">
          <!-- 图标 -->
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-shangpinguanli"></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/my">
        <span>我的</span>
        <template #icon="props">
          <!-- 图标 -->
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-yonghutouxiang"></use>
          </svg>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";

export default {
  name: "index",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="less">
.xl-icon.active {
  color: @baseColor !important;
}
</style>